<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input style="width: 240px;" v-model="articleStore.name" placeholder="请输入标题查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="articleStore.getLoad">查 询</el-button>
      <el-button type="warning" @click="articleStore.reset">重 置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-button type="primary" @click="articleStore.handleAdd">新 增</el-button>
      <el-button type="danger" @click="articleStore.deleteBatch">批量删除</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-table stripe :data="articleStore.options" strip @selection-change="articleStore.handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="标题" prop="title" />
        <el-table-column label="封面" prop="img">
          <template #default="scope">
            <el-image v-if="scope.row.img" :src="scope.row.img" :preview-src-list=[scope.row.img] preview-teleported style="display: block; width: 100px; height: 60px;" />
          </template>
        </el-table-column>
        <el-table-column label="简介" prop="description" show-overflow-tooltip/>
        <el-table-column label="内容" prop="content">
          <template #default="scope">
            <el-button type="primary" @click="view(scope.row.content)">查看内容</el-button>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="time" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" circle @click="articleStore.handleUpdate(scope.row)"></el-button>
            <el-button type="danger" :icon="Delete" circle @click="articleStore.handleDelete(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <el-pagination
        @change="articleStore.getLoad"
        v-model:current-page="articleStore.pageNum"
        v-model:page-size="articleStore.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="articleStore.total"
      />
    </div>
    <el-dialog title="文章信息" v-model="articleStore.formVisible" width="65%" :close-on-click-modal="false" destroy-on-close>
      <el-form ref="formRef" :model="articleStore.form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="articleStore.form.title" autocomplete="off" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="封面" prop="img">
          <el-upload
            list-type="picture"
            action="http://localhost:8080/files/upload"
            :on-success="handleAvatarSuccess"
          >
            <el-button type="primary">上传封面</el-button> 
          </el-upload>  
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input type="textarea" :row="3" v-model="articleStore.form.description" autocomplete="off" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div style="border: 1px solid #ccc; width: 100%">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :mode="mode"
            />
            <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="articleStore.form.content"
                :mode="mode"
                :defaultConfig="editorConfig"
                @onCreated="handleCreated"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="articleStore.formVisible = false">关 闭</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useArticleStore } from '@/store/articleStore';
import { onMounted, ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import '@/style/text.css'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, shallowRef} from "vue";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

/* wangEditor5 初始化开始 */
const baseUrl = 'http://localhost:8080'
const editorRef = shallowRef()  // 编辑器实例，必须用 shallowRef
const mode = 'default' 
const editorConfig = { MENU_CONF: {} }
// 图片上传配置
editorConfig.MENU_CONF['uploadImage'] = {
  server: baseUrl + '/files/wang/upload',  // 服务端图片上传接口
  fieldName: 'file'  // 服务端图片上传接口参数
}
// 组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
// 记录 editor 实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor 
}
/* wangEditor5 初始化结束 */
const view = (newContent) => {
  articleStore.form.content = newContent;
  articleStore.formVisible = true;
};

const content = ref(null);

const articleStore = useArticleStore();

const handleAvatarSuccess = (res) => {
  if (res.code === '200' && res.data) {
    articleStore.form.img = res.data; // 将上传的头像 URL 赋值给表单
    ElMessage.success('头像上传成功');
  } else {
    ElMessage.error('头像上传失败');
  }
};

// 保存操作
const handleSave = () => {
  articleStore.save(); // 调用 store 中的保存方法
}
onMounted(() => articleStore.getLoad());
</script>